<template>
    <div class="">
      <div class="page-content">
        <div class="w100vw h108vw">
          <img :src="proDetail.head_img" class="w100vw" alt="">
        </div>
        <div class="py8p px35">
          <p class="fz22 lh30 clr5">
            {{ proDetail.title }}
          </p>
          <div class="flx">
            <price v-for="(i, n) in price" :key="n" :price="i" />
          </div>
        </div>
        <div class="flx-am fz17 bdb8 pos-s t0 bgc14">
          <div :class="curTab === 1? 'bdb1 bdbw2': 'bdb13 bdbw2'" class="h46 lh46">
            <a @click="onClick(1)" :class="curTab === 1? 'clr5' : 'clr7'" href="#detail">详情</a>
          </div>
          <div :class="curTab === 2? 'bdb1 bdbw2': 'bdb13 bdbw2'" class="h46 lh46">
            <a @click="onClick(2)" :class="curTab === 2? 'clr5' : 'clr7'" href="#params">参数</a>
          </div>
          <div :class="curTab === 3? 'bdb1 bdbw2': 'bdb13 bdbw2'" class="h46 lh46">
            <a @click="onClick(3)" :class="curTab === 3? 'clr5' : 'clr7'" href="#reviews">测评</a>
          </div>
        </div>
        <div id="detail">
          <div v-for="(i,n) in proDetail.details" :key="n">
            <img :src="i.url" class="w100vw" alt="">
          </div>
        </div>
        <div id="params">
          <div class="mt50 pt50 pb20 fwb fz20 clr1 flx-mm bdt11 bdtw5">
            规格参数
          </div>
          <div v-for="(i,n) in proDetail.params" :key="n">
            <img :src="i.url" class="w100vw" alt="">
          </div>
        </div>
        <div id="reviews">
          <div class="mt50 pt50 pb20 fwb fz20 clr1 flx-mm bdt11 bdtw5">
            产品评测
          </div>
          <Review v-for="(i,n) in proDetail.reviews" :key="n" :review="i" />
        </div>
      </div>
      <div class="bottom-bar bgc14 h56 pos-s b0 w100p flx">
        <div class="flx-g-1 h100p flx-am bdr8 bdt8 bdb8">
          <nuxt-link to="/" class="flx-g-1 fz25 clr14 flx-mm bdr8"><i class="fa fa-home" aria-hidden="true" /></nuxt-link>
          <nuxt-link to="/" class="flx-g-1 fz25 clr14 flx-mm bdr8"><i class="fa fa-headphones" aria-hidden="true" /></nuxt-link>
          <nuxt-link to="/cart" class="flx-g-1 fz25 clr14 flx-mm"><i class="fa fa-shopping-cart" aria-hidden="true" /></nuxt-link>
        </div>
        <div class="flx-g-1 h100p bdt8 bdb8">
          <nuxt-link @click.native="showPop('add-cart')" to="" class="d-block h100p w100p flx-mm clr5 fz15">加入购物车</nuxt-link>
        </div>
        <div class="flx-g-1 h100p">
          <nuxt-link @click.native="showPop('add-bill')" to="" class="d-block h100p w100p flx-mm clr14 bgc2 fz15">立即购买</nuxt-link>
        </div>
      </div>
      <pop ref="pop" show-overlayer>
<!--        <skus class="sku px35 pt35 pb50" :pro-detail="proDetail" :skus="proDetail.skus"></skus>-->
        <skus2
          :skus="proDetail.skus"
          :pro-detail="proDetail"
          :dims="dims"
          @sku-check="onCheckSku"
          ref="sku"
          class="sku px35 pt35 pb50"
        />
        <div>
          <vtButton class="w100p h56 bgc2 flx-mm clr14 fz16" @click.native="onConfirm">
            确定
          </vtButton>
        </div>
      </pop>
    </div>
</template>

<script>
  import { myTools } from 'assets/myTools/jsTools/jsTools'
  import Overlay from 'assets/myTools/vueTools/com/common/overlay/overlay'
  import Pop from 'assets/myTools/vueTools/com/common/pop/pop'
  import vtButton from 'assets/myTools/vueTools/com/common/button/button'
  import Skus from 'assets/myTools/vueTools/com/common/skus/skus'
  import Skus2 from 'assets/myTools/vueTools/com/common/skus2/skus2'
  import axios from 'axios'
  import Review from '../components/product/review'
  import Price from '../components/product/price'
  import {Toast} from 'vant'
  export default {
    components: {
      Price,
      Review,
      Overlay,
      Pop,
      vtButton,
      Skus,
      Skus2
    },
    data () {
      return {
        pid: '',
        price: [],
        curTab: 1,
        addTo: '',
        dims: {},
        checkSku: {}
      }
    },
    async asyncData ({app, query}) {
      /*const { status, data } = await axios.post(`${env.BASE_URL}/goods/prodetail`, {
        params: {
          pid: query.pid
        }
      })*/
	  
	  const { status, data } = await app.$axiosApi.postProductDetail({
          pid: query.pid
      })
      if (status === 200 && data.code === 0) {
        return {
          proDetail: data.data
        }
      }
    },
    async created () {
      console.log(process.env.BASE_URL)
      this.filterPrice(this.proDetail.skus)
      let obj = {}
      for(let i in this.proDetail.sale_sort) {
        if(this.proDetail.sale_sort[i] instanceof Array && this.proDetail.sale_sort[i].length !== 0){
          obj[i] = this.proDetail.sale_sort[i + '_name']
        }
      }
      this.dims = obj
    },
    methods: {
      async getData (params) {
        const data = await myTools.axiosPost(this, '/goods/prodetail', params)
        if (data.code === 0) {
          return data.data
        }
      },
      filterPrice (skus) {
        const price = []
        skus.forEach((item, idx) => {
          if (
            item.sale_unit !== '' &&
            myTools.arrSomeItem(price, 'price', item.price) === false &&
            myTools.arrSomeItem(price, 'sale_unit', item.sale_unit) === false
          ) {
            price.push({
              price: item.price,
              sale_unit: item.sale_unit
            })
          }
        })
        this.price = price
      },
      onClick (x) {
        this.curTab = x
      },
      showPop (str) {
        this.$refs.pop.show()
        this.addTo = str
      },
      onCheckSku(obj) {
        this.checkSku = obj
        console.log(this.checkSku)
      },
      async onConfirm() {
        let checked = this.checkSku
		let isDimsEmpty = Object.keys(this.dims).length === 0

		if(isDimsEmpty) {
			if(!checked.id) {
			  if(this.addTo === 'add-cart') {
				let {status, data} = await this.$axios.post('/usr/addCart', {
				  params: {
					uid: myTools.getSession('usr').uid,
					skuid: this.proDetail.skus[0].id,
					count: 1,
				  }
				})
				if(status === 200 && data.code === 0) {
				  Toast(data.msg)
				}
			  }else if(this.addTo === 'add-bill'){
				window.location = `/checkBill?uid=${myTools.getSession('usr').uid}&sid=${this.proDetail.skus[0].id}&count=1&from=product`
			  }else{
				console.log('error on click buy confirm button')
			  }
			}else{
			  if(this.addTo === 'add-cart') {
				let {status, data} = await this.$axios.post('/usr/addCart', {
				  params: {
					uid: myTools.getSession('usr').uid,
					skuid: checked.id,
					count: checked.count,
				  }
				})
				if(status === 200 && data.code === 0) {
				  Toast(data.msg)
				}
			  }else if(this.addTo === 'add-bill'){
				window.location = `/checkBill?uid=${myTools.getSession('usr').uid}&sid=${this.checkSku.id}&count=${this.checkSku.count}&from=product`
			  }else{
				console.log('error on click buy confirm button')
			  }
			}
		}else{
			if(!checked.id) {
			  if(!checked.txt) {
				Toast(this.$refs.sku.skuTxt)
			  }else{
				Toast(checked.txt)
			  }
			}else{
			  if(this.addTo === 'add-cart') {
				let {status, data} = await this.$axios.post('/usr/addCart', {
				  params: {
					uid: myTools.getSession('usr').uid,
					skuid: checked.id,
					count: checked.count,
				  }
				})
				if(status === 200 && data.code === 0) {
				  Toast(data.msg)
				}
			  }else if(this.addTo === 'add-bill'){
				window.location = `/checkBill?uid=${myTools.getSession('usr').uid}&sid=${this.checkSku.id}&count=${this.checkSku.count}&from=product`
			  }else{
				console.log('error on click buy confirm button')
			  }
			}
		}
      }
    }
  }
</script>

<style scoped lang="stylus">
.bottom-bar
  .fa
    -webkit-text-stroke: 1px color5;
    text-stroke: 1px color5;
</style>
